<template>
    <section class="NewsDetails-box">
        <app-header></app-header>
        <!--中间内容-->
        <div class="content">
            <div class="container">
                <a-breadcrumb>
                    <a-breadcrumb-item><router-link to="/">首页</router-link></a-breadcrumb-item>
                    <a-breadcrumb-item><router-link to="/News">新闻资讯</router-link></a-breadcrumb-item>
                    <a-breadcrumb-item><router-link :to=breadcrumblink>{{ newsTypeName }}</router-link></a-breadcrumb-item>
                    <a-breadcrumb-item>详情页</a-breadcrumb-item>
                </a-breadcrumb>
                <a-row :gutter="40" class="main-content">
                    <a-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16" class="left-box">
                        <div class="inside" v-show="!noDataShow">
                            <h1>{{ isNull0(DetailsData.title) }}</h1>
                            <p>
                                <span><i class="iconfont icon-fabushijian"></i> {{ momentFormat(DetailsData.createTime, 'YYYY-MM-DD') }}</span>
                                <span><i class="iconfont icon-source"></i> {{ isNull0(DetailsData.source) }}</span>
                                <span><i class="iconfont icon-yanjing2"></i>  {{ isNull0(DetailsData.pageView) }}</span>
                            </p>
                            <aside>
                                <i class="iconfont icon-baojiaquotation2 leftTop"></i>
                                <p>{{ isNull0(DetailsData.description) }}</p>
                                <i class="iconfont icon-baojiaquotation rightBottom"></i>
                            </aside>
                            <img :src="DetailsData.photo" alt="" v-if="DetailsData.photo">
                            <div class="news-content" v-html="isNull0(DetailsData.content)"></div>
                        </div>
                        <h5 style="text-align: center; padding: 15px;" v-show="noDataShow">暂未查询到数据！</h5>

                        <!--展会活动报名框-->
                        <exhibitionsignUp></exhibitionsignUp>

                        <!--百度推广——第三方分享插件-->
                        <div class="bdsharebuttonbox bdshare-button-style0-16">
                            <a href="#" class="bds_more" data-cmd="more"></a>
                            <a href="#" class="bds_qzone" data-cmd="qzone"></a>
                            <a href="#" class="bds_tsina" data-cmd="tsina"></a>
                            <a href="#" class="bds_tqq" data-cmd="tqq"></a>
                            <a href="#" class="bds_renren" data-cmd="renren"></a>
                            <a href="#" class="bds_weixin" data-cmd="weixin"></a>
                        </div>

                    </a-col>
                    <!--公共页面主体的右侧内容-->
                    <a-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" class="right-box">
                        <rightList :msgType="5"></rightList>
                    </a-col>
                </a-row>
            </div>
        </div>

        <!--返回顶部-->
        <BackTop :isShowHouseContrast="false"></BackTop>
    </section>
</template>

<script>
    import Header from '../../components/header.vue';//公共组件——头部
    import exhibitionsignUp from '../../components/exhibitionsignUp.vue';//公共组件——展会活动报名框
    import rightList from '../../components/rightList.vue';//公共组件——页面主体的右侧内容
    import BackTop from '../../components/BackTop.vue';//公共组件——返回顶部

    export default {
        data() {
            return {
                newsId: this.$route.params.newsId,// 详情Id
                newsTypeName: '',   //新闻资讯类型：美国房产,美国财经,移民留学,美国生活
                breadcrumblink: '', //跳转回上级，新闻资讯类型列表页
                DetailsData:{}, //详情数据
                noDataShow: false,   //没有数据提示信息是否显示

                metaInfo_title: '',//vue-meta动态管理头部标签-title
                metaInfo_keywords: '',//vue-meta动态管理头部标签-keywords
                metaInfo_description: '',//vue-meta动态管理头部标签-description

            }
        },
        metaInfo () {
            return {
                title: this.metaInfo_title,
                meta: [
                    { vmid: 'keywords', name: 'keywords', content: this.metaInfo_keywords },
                    { vmid: 'description', name: 'description', content: this.metaInfo_description },
                ],
            }
        },
        computed: {},
        created() {
        },
        beforeRouteUpdate(to, from, next){
            next();
            // console.log(to, from, next)

            if(from.path.indexOf('NewsDetails') != -1){
                this.newsId = to.params.newsId;
                //更新新闻资讯详情数据
                this.getNewsDetailsData();
            }
        },
        beforeCreate(){
            //把百度分享的一个参数置空
            window._bd_share_main = '';
        },
        mounted() {
            //获取新闻资讯详情数据
            this.getNewsDetailsData();

            this.$nextTick(() => {
                // 百度分享插件
                this.bd_share();
            });

        },
        methods: {
            // 获取新闻资讯详情数据
            getNewsDetailsData() {
                this.$get('/news/detail/'+ this.newsId).then(res => {
                    if (res.status === 0) {
                        this.DetailsData = res.data;
                        this.metaInfo_title = res.data.seoTitle;
                        this.metaInfo_keywords = res.data.seoKeyword;
                        this.metaInfo_description = res.data.seoDescription;
                        this.noDataShow = false;

                        if (res.data.type == 6){
                            this.newsTypeName = '美国房产';
                            this.breadcrumblink = {name: 'NewsSecondaryList', params: {type: '6'}};
                        }
                        if (res.data.type == 7){
                            this.newsTypeName = '美国财经';
                            this.breadcrumblink = {name: 'NewsSecondaryList', params: {type: '7'}};
                        }
                        if (res.data.type == 8){
                            this.newsTypeName = '移民留学';
                            this.breadcrumblink = {name: 'NewsSecondaryList', params: {type: '8'}};
                        }
                        if (res.data.type == 9){
                            this.newsTypeName = '美国生活';
                            this.breadcrumblink = {name: 'NewsSecondaryList', params: {type: '9'}};
                        }
                    } else {
                        console.log(res.msg);
                        this.noDataShow = true;
                    }
                })
            },

            //百度分享插件
            bd_share(){
                window._bd_share_config={
                    "common":{
                        "bdSnsKey":{},
                        "bdText":"",
                        "bdMini":"2",
                        "bdPic":"",
                        "bdStyle":"0",
                        "bdSize":"16"
                    },
                    "share":{},
                    "image":{
                        "viewList":["qzone","tsina","tqq","renren","weixin"],
                        "viewText":"分享到：","viewSize":"16"
                    },
                    "selectShare":{
                        "bdContainerClass":null,
                        "bdSelectMiniList":["qzone","tsina","tqq","renren","weixin"]
                    }
                };
                const s = document.createElement('script');
                s.type = 'text/javascript';
                s.src = '/static/api/js/share.js?v=89860593.js?cdnversion=' + ~(-new Date() / 36e5);
                document.body.appendChild(s);
            }

        },
        components: {
            'app-header': Header,//公共组件——头部
            exhibitionsignUp,//公共组件——展会活动报名框
            rightList,//公共组件——页面主体的右侧内容
            BackTop,//公共组件——返回顶部
        }
    }
</script>

<style lang="less" type="text/less">
    body {
        .NewsDetails-box {
            background: #f7f9fa;
            .content {
                padding: 30px 0;
                > .container {
                    padding: 0;
                    > .main-content {
                        padding: 40px 0 0 0;
                        > .left-box{
                            padding: 0;
                            background: #fff;
                            > .inside{
                                padding: 40px;
                                background: #fff;
                                img{
                                    display: inline-block;
                                    width: 100%;
                                    height: auto;
                                    margin-top: 30px;
                                    margin-bottom: 30px;
                                    margin-left: auto;
                                    margin-right: auto;
                                }
                                >h1{
                                    font-size: 25px;
                                    color: #38485a;
                                    font-weight: bold;
                                    margin: 10px 0;
                                }
                                >p{
                                    margin: 20px 0;
                                    color: #00aced;
                                    >span{
                                        margin: 0 0 0 20px;
                                        cursor: pointer;
                                    }
                                    >span:first-of-type{
                                        margin: 0;
                                    }
                                }
                                >aside{
                                    margin: 20px 0;
                                    padding: 40px;
                                    position: relative;
                                    background: #f8f8f8;
                                    z-index: 4;
                                    >i{
                                        font-size: 30px;
                                    }
                                    >i.leftTop{
                                        position: absolute;
                                        left: 10px;
                                        top: 0;
                                        z-index: 5;
                                    }
                                    >i.rightBottom{
                                        position: absolute;
                                        right: 10px;
                                        bottom: 0;
                                        z-index: 5;
                                    }
                                    >p{
                                        font-size: 16px;
                                        line-height: 30px;
                                        margin-bottom: 0px;
                                        >span{
                                            margin: 0 0 0 20px;
                                        }
                                        >span:first-of-type{
                                            margin: 0;
                                        }
                                    }
                                }
                                .news-content{
                                    p{
                                        margin-bottom: 0;
                                    }
                                    img{
                                        display: inline-block;
                                        width: 100%;
                                        max-width: 100% !important;
                                        height: auto;
                                        margin-top: 30px;
                                        margin-bottom: 30px;
                                        margin-left: auto;
                                        margin-right: auto;
                                    }
                                }
                            }

                        }
                        /* 右侧列表——广告轮播位，推荐房源，热门资讯，客户留言 */
                        > .right-box{
                            >.inside {
                                background: #fff;
                                padding: 15px;
                            }
                        }

                    }
                }
            }
        }
    }
</style>
